<template>
<h1>watch侦听器</h1>
<p>
    <input type="text" size="3" v-model="firsName" placeholder="请输入姓">
    <input type="text" size="5" v-model="lastName" placeholder="请输入名">
</p>
<p>
    姓名：{{fullName}}
</p>
<hr>
<p>{{ hello }}</p>

<p>{{ msg1 }}</p>
<p>{{ msg2 }}</p>
</template>
<script>
export default {
    data() {
        return {
            firsName: '秋山',
            lastName: '澪',
            fullName: '?',

            name:'Mio',
            hello: '?',

            info:{
                name: 'Mio',
                age: 20,
            },

            msg1:'?',
            msg2:'?'
        }
    },
    watch: {
        firsName(newVal) {
            this.fullName = newVal + this.lastName;
        },
        lastName(newVal) {
            this.fullName = this.firsName + newVal; 
        },
        name:{
            handler(newVal){
                this.hello = `你好，${newVal}`;
            },
            immediate: true,
        },

        'info.name'(newVal){
            this.msg1 = `你好，${newVal}`;
        },

        info:{
            handler(newVal){
                this.msg2 = `我叫${newVal.name},今年${newVal.age}岁`;
            },
            deep: true,
        }
    

    },
    
}


</script>